<template>
  <div id="app">
    <a-menu
      style="
        width: 80px;
        height: 100vh;
        background: linear-gradient(118deg, #7367f0, rgba(115, 103, 240, 0.7));
      "
      :default-selected-keys="['1']"
      mode="vertical"
      @click="handleClick"
    >
      <a-icon type="logo" style="font-size: 24px; color: #fff"></a-icon>
      <a-menu-item key="1">
        <icon-font type="icon-shouye-m" />
        <span>主页</span>
      </a-menu-item>
      <a-menu-item key="3">
        <icon-font type="icon-shuju-m" />
        <span>数据</span>
      </a-menu-item>
      <a-menu-item key="4">
        <icon-font type="icon-shujujiance-m" />
        <span>预测</span>
      </a-menu-item>
      <a-menu-item key="2">
        <icon-font type="icon-shujuzhongxin-m" />
        <span>看板</span>
      </a-menu-item>
      <a-menu-item key="5">
        <icon-font type="icon-faxian2-m" />
        <span>管理</span>
      </a-menu-item>
      <a-menu-item key="6">
        <icon-font type="icon-a-121-quanping" />
        <span>{{fullscreen_title}}</span>
      </a-menu-item>
    </a-menu>
    <div
      style="
        flex: 1;
        overflow-x: hidden;
        width: calc(100vw - 80px);
        height: 100vh;
        overflow-y: auto;
      "
    >
      <router-view />
    </div>
  </div>
</template>
<script>
import { Icon } from "ant-design-vue";

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_4063166_67yu0dmy4q.js",
});
export default {
  data() {
    return {
      active: "home",
      fullscreen_title: "全屏",
    };
  },
  components: {
    IconFont,
  },
  methods: {
    handleClick(e) {
      console.log(e);
      let key = e.key;
      switch (key) {
        case "1":
          // 跳转到首页
          this.$router.push("/");
          break;
        case "2":
          // 跳转到关于我们页面
          this.$router.push("/about");
          break;
        case "3":
          // 跳转到关于我们页面
          this.$router.push("/data");
          break;
        case "4":
          // 跳转到关于我们页面
          this.$router.push("/predict");
          break;
        case "5":
          // 跳转到关于我们页面
          this.$router.push("/manage");
          break;
        case "6":
          // 跳转到关于我们页面
          this.handleFullScreen();
          break;
        default:
          break;
      }
    },
    // 全屏
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        this.fullscreen_title = "全屏";
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        this.fullscreen_title = "缩小";
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    test(e) {
      console.log("test", e.detail);
    },
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  justify-content: flex-start;
}

.ant-menu {
  padding: 10px !important;
}

.anticon-logo {
  background-image: url("./assets/logo.png");
  background-size: contain;
  width: 60px;
  height: 60px;
}

.ant-menu-item {
  height: 60px !important;
  padding-top: 8px !important;
  padding-bottom: 7.5px !important;
  /* line-height: 45px !important; */
  color: gray;
  border-radius: 10px;
  display: flex !important;
  flex-direction: column !important;
  /* justify-content: center; */
  align-items: center;
}

.ant-menu-item .anticon {
  color: #b3cae9;
  font-size: 20px !important;
  margin: 0 !important;
  margin-right: 0 !important;
  line-height: 20px;
}

.ant-menu-item span {
  color: #b3cae9;
  font-size: 5px !important;
  margin: 0 !important;
  line-height: 25px;
}

.ant-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

.ant-menu-item:hover .anticon,
ant-menu-item:hover span {
  color: #ffffffaf !important;
}

.ant-menu-item-selected,
.ant-menu-item-active {
  background-color: rgba(255, 255, 255, 0.305) !important;
}

.ant-menu-item-selected .anticon,
.ant-menu-item-active .anticon,
.ant-menu-item-selected span {
  color: white !important;
}
</style>
